class Awards extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            thumbpath: '',
            typename: '',
            description: '',
            goodsid: '',
            id: 0,
            ishide: 'none',
            counts: '',
            pagesize: 100,
            start: 0,
            pagestart: 0,
            counts: [], pics: '',
            tagcid: 0,
            tagnamearr: [],
            viewlabel:[],
            fileimgshow: !0,
        };
    }
    componentDidMount() {

        let { pagesize, start } = this.state, that = this
        getlist({ pagesize, start }, res => {

            if (res.issuccess == 1) {

                let taghtml = []
                taghtml.push(
                    <option value="0">请选择</option>
                )
                res.list.forEach((x, i) => {
                    taghtml.push(
                        <option key={i} value={x.id} id={x.id}>{x.name} </option>
                    )

                })

                this.setState({ taghtml, tagcate: res.list }, () => {
                    let id = GetQueryString('id')
                    if (id != 'null' && id) {
                        that.setState({ id }, () => {                        
                            that.freshlist()
                        })
                    }
                });

            }

        })

    }
    freshlist() {
        let { id } = this.state, that = this;
        getawraddetail(id, res => {
            console.log("!!!!!!")
            if (res.issuccess == 1) {
                var { typename, imgsrc, description ,tagcate,} = this.state, x = res.data, viewlabel = [],tagnamehtml = [],tagnamearr=[]
                if (x.goodsid) {
               
                    viewlabel = x.goodsid.split(",")
                    viewlabel.forEach((z, j) => {
                        tagcate.forEach((y, i) => {
                            if (y.id == z) {
                               
                                tagnamearr.push(y)
                      
                            }
                        })
                    })
                    tagnamearr.forEach((x, i) => {
                      
                        // viewlabel.push(x.id)
                        tagnamehtml.push(
                            <div className="goodstagbox">
                                <p>{x.name}</p>
                                <img className='closeimg' onClick={this.del_tag.bind(this, x.id)} src='./src/img_close.png' />
                            </div>
                        )
                        console.log("!!!!!!!!!!!!!!!!!!!11")
                    })
                    that.setState({tagnamehtml,viewlabel,tagnamearr})
                }
                typename = x.typename
               
                imgsrc = `${API_HEAD}imgs/${x.thumbpath}`

                description = x.description
                this.setState({
                    typename, imgsrc, description,fileimgshow:!1,
                })
                
            }
        })

    }
    del_tag(e) {
        let { tagnamearr } = this.state, tagnamehtml = [], viewlabel = []
        tagnamearr.forEach((x, i) => {
            if (x.id == e) {
                tagnamearr.splice(i, 1)
                tagnamearr.forEach((x, i) => {
                    viewlabel.push(x.id)
                    tagnamehtml.push(
                        <div className="goodstagbox">
                            <p>{x.name}</p>
                            <img className='closeimg' onClick={this.del_tag.bind(this, x.id)} src='./src/img_close.png' />
                        </div>
                    )
                })
                this.setState({ tagnamearr, tagnamehtml, viewlabel })
            }
        })

    }


    toback() {
        window.location.href = "./award.html";
    }
    onstatechange(e) {

        let { tagcid, tagcate } = this.state, estate = e.target.value, erstatehtml = [],
            tag = '', that = this;
            if (tagcid == estate) return;
            tagcate.forEach((x, i) => {
                if (x.id == estate) {
                    tag = x
                }
            })
            this.setState({ tagcid: estate, tag })

    }
    addtag() {
        let { tag, tagnamearr, tagcid } = this.state, tagnamehtml = [], viewlabel = []

        if (tagcid == 0) {
            return;
        } else {
            if (tagnamearr.indexOf(tag) == -1) {

                tagnamearr.push(tag)
                console.log(tagnamearr)
                tagnamearr.forEach((x, i) => {
                    viewlabel.push(x.id)
                    tagnamehtml.push(
                        <div className="goodstagbox">
                            <p>{x.name}</p>
                            <img className='closeimg' onClick={this.del_tag.bind(this, x.id)} src='./src/img_close.png' />
                        </div>
                    )
                })
            } else {
                return;
            }
        }
        this.setState({ tagnamearr, tagnamehtml, viewlabel })
    }

    inputchange(prop,e) {

        this.setState({ [prop]: e.target.value })
    }
    submit() {

        let { description, typename, imgsrc, viewlabel } = this.state, err = '',imgarr = [];
        if (description == '') err = '请输入大奖作品描述';
        if (!imgsrc) err = "请添加大奖作品图片"
        if (typename == '') err = '请输入大奖名称';
        if(viewlabel.length==0)err="请选择大奖作品"
        if (err.length > 0) {
            alert(err);
            return;
        }
        // if (thumbpath.length == 0) {
        //     alert(thumbpath)
        // }

        // console.log(thumbpath);
        imgarr = imgarr.concat(imgsrc)

        this.uploadimg(imgarr)

    }

     // 图片
     filechangeimg(e) {

        var that = this;
        var filedata = $('#file' + e)[0].files[0];
        let _name, _fileName;
        _name = $('#file' + e)[0].value;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg" && _fileName !== "gif" && _fileName !== "jpeg") {
            alert("上传图片格式不正确，请重新上传");
        } else {
            this.setState({
                fileimgshow: !1,
                imgstate: ''
            })
            let filee = e
            var reader = new FileReader();
            reader.readAsDataURL(filedata);
            reader.onload = function (e) {
                var base64str = e.target.result;
                that.putswiperimglistdata([base64str], filee)
            }
        }
    }
    putswiperimglistdata(target, e) {
        let { imgsrc, lbimgsrc, lbimgsrcarr } = this.state;

        imgsrc = target[0]
        if (!isBase64(imgsrc)) {
            if (imgsrc.indexOf(`${API_HEAD}`) == -1) {
                imgsrc = `${API_HEAD}imgs/${src}`

            }
        }


        this.setState({
            imgsrc
        })

    }
    clickupload(e) {
        $('#file' + e).click();
    }
    del_img(e) {

        this.setState({
            imgsrc: '',
            fileimgshow: !0,
            imgstate: '',
        })

    }
    
  

    uploadimg(arr) {
        var { description, typename, imgsrc, finishupload, pics,viewlabel} = this.state, err = '';
        let uploadimgarr = []
        arr.forEach((x, i) => {
            if (x.indexOf(`${API_HEAD}`) == -1) {
                if (isBase64(x)) {
                    uploadimg(x, res => {
                        if (res.issuccess == 1) {
                            x = `${API_HEAD}imgs/${res.path}`
                            uploadimgarr.push(x)
                        } else {
                            alert(res.msg)
                            err = 1
                            return;
                        }
                    })
                }
            } else {
                uploadimgarr.push(x)
            }
        })
        if (uploadimgarr.length == arr.length) {
            uploadimgarr.forEach((x, i) => {
                if (i == 0) {
                    imgsrc = x.replace(`${API_HEAD}imgs/`, '')
                }
            })
           let goodsid = String(viewlabel)
            var data = { thumbpath: imgsrc, typename, description, goodsid };
console.log(data,"datadatadatadatadatadatadatadata")
            if (Number(this.state.id) > 0) {
                data['id'] = this.state.id;
            }
            addaward(data, res => {
                if (res.issuccess == 1) {
                    alert(`${this.state.id > 0 ? '修改' : '保存'}成功`);
                    window.location.href = "./award.html";
                } else {
                    alert(res.msg)
                }
            })
        }

    }






    // deschange(e, x) {
    //     var prop = "description"
    //     this.setState({
    //         [prop]: x.target.value
    //     })
    // }
    tomaster() {
        window.location.href = "./award.html";
    }
    render() {
        let { listitem, counts, pagestart, tagnamehtml, taghtml,imgsrc } = this.state;
        return (
            <div className="breadLinebox">

                <div className='content_wrap panel-default content_wrap'>
                    <div className="breadLine">
                        <div className="img">
                            {/* <img src={Constant.LEFTMENU_ORDER} /> */}
                            当前位置  <span onClick={this.toback.bind(this)} style={{ cursor: 'pointer' }}>大奖作品管理</span>>大奖作品添加
                        </div>
                    </div>

                    <div className="content form">
                        <div className="formtitle">
                            <p>{this.state.id > 0 ? "编辑" : "新建"}</p>
                        </div>
                        <div className="formbox">
                            <div className="formcontent">

                                <div className="input-group">
                                    <span className="input-group-addon">大奖作品数目</span>
                                    <div className="mallradiobox" >
                                        <select value={this.state.tagcid} onChange={this.onstatechange.bind(this)} className="form-control select">
                                            {taghtml}
                                        </select>
                                        <span className="add" onClick={this.addtag.bind(this)}>添加</span>
                                    </div>
                                    <div className="tagnamehtml">
                                        {tagnamehtml}
                                    </div>
                                </div>
                            </div>

                            <div className="input-group">
                                <span className="input-group-addon">大奖作品名称</span>
                                <input id='name' onChange={this.inputchange.bind(this,'typename')} value={this.state.typename} type="text" placeholder='请输入大奖名称' className="input" />
                            </div>

                            <div className="input-group">
                                    <span className="label input-group-addon">大奖作品图片</span>
                                    <input onChange={this.filechangeimg.bind(this, '3')} type='file' id='file3' style={{ display: "none" }} />
                                    <div className='detail_btns'>
                                        <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, '3')} style={{ display: this.state.fileimgshow ? "" : "none" }} />
                                        <div className="img_warp" style={{ display: this.state.fileimgshow ? "none" : "" }}>
                                            <img src={imgsrc} className="img" />
                                            <img className='closeimg' onClick={this.del_img.bind(this)} src='./src/img_close.png' style={{ display: this.state.fileimgshow ? "none" : "" }} />
                                        </div>
                                    </div>
                                </div>





                                <div className="input-group">
                                    <span className="input-group-addon">大奖作品描述</span>
                                    <textarea id='name' onChange={this.inputchange.bind(this, 'description')} value={this.state.description} type="text" placeholder='请输入大奖作品描述' className="textarea" rows="3"></textarea>
                                </div>

                        </div>
                        <div className="submitbox">
                                <button type="button" onClick={this.submit.bind(this)} className="submitbutton">提交</button>
                                <button type="button" onClick={this.tomaster.bind(this)} className="submitbutton" style={{ marginLeft: '100' }}>返回</button>
                            </div>
                    </div>
                </div>
            </div>

        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='3'/> */}
        <LeftMenu code='award' />
        <Awards />
    </div>
    //<Barrage/>
    , $('.container')[0]
)